import React from 'react';
import { Row, Col, Icon, List, Typography, Table, Input } from 'antd';
import AxCard from '@/components/AxBase/AxCard';
import style from './style.less'
import { AxPanelSumProps } from './data';
import { AxButton } from '@/components/AxBase';
import { axconst } from '@/shared/axconst';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import AxCardList from '@/components/AxCardList';
import { router } from 'umi';

const Search = Input.Search;
const AxPanelSum: React.FC<AxPanelSumProps> = props => {
    const {
        name,
        greet,
        desc,
        statistics = [],
    } = props;

    return (
        <AxCard style={{ marginBottom: '15px', height: '100%' }}>
            <Row>
                <Col span={20}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;{greet}&nbsp;<span className={style.instructor}>供应商
                        <AxButton type='link' icon='edit' shape="round"></AxButton>
                        </span>
                    </p>
                </Col>
                <Col span={4}>
                    <AxButton className='ax-no-class' shape="round">申请加入校园</AxButton>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum2: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: '100%' }}>
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={16}>
                    <p className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;商品管理
                    </p>
                </Col>
                <Col span={4}>
                </Col>
                <Col span={4}>
                    <AxButton className='ax-no-class' style={{ float: 'right' }} type='link' onClick={() => router.push('/seller/goods')}>更多</AxButton>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={12}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8</p>
                        <p>上架商品</p>
                    </div>
                </Col>
                <Col span={12}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>18</p>
                        <p>商品库</p>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum3: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: '100%' }} >
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={20}>
                    <span className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;财务结算
                    </span>
                </Col>
                <Col span={4}>
                    <AxButton className='ax-no-class' style={{ float: 'right' }} type='link' onClick={(e: Event) => { e.preventDefault(); router.push('/seller/finance') }}>更多</AxButton>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8个</p>
                        <p>待结算</p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>18个</p>
                        <p>待退款</p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>28个</p>
                        <p>结算记录</p>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

const AxPanelSum4: React.FC<AxPanelSumProps> = props => {
    return (
        <AxCard style={{ marginBottom: '15px', height: '100%' }} >
            <Row gutter={15} style={{ marginBottom: '25px' }}>
                <Col span={20}>
                    <span className={style.title_user}>
                        <Icon type="user" className={style.title_instructor} />&nbsp;订单管理
                    </span>
                </Col>
                <Col span={4}>
                    <AxButton className='ax-no-class' style={{ float: 'right' }} type='link' onClick={(e: Event) => { e.preventDefault(); router.push('/seller/order') }}>更多</AxButton>
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8个</p>
                        <p>待确定</p>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8个</p>
                        <p>待发货</p>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8个</p>
                        <p>待收货</p>
                    </div>
                </Col>
                <Col span={6}>
                    <div className={style.statistics_box}>
                        <p className={style.statistics_value}>8个</p>
                        <p>已收货</p>
                    </div>
                </Col>
            </Row>
        </AxCard>
    )
}

export const AxPanelMsg2: React.FC<any> = props => {
    const {
        title,
        columns = [],
        data = [],
        onClick,
    } = props;

    return (
        <Table
            rowKey={(record: any) => record.id}
            size='small'
            showHeader={false}
            pagination={false}
            scroll={{ y: 239 - 15 }}
            style={{ backgroundColor: '#fff', border: '0px', borderRadius: 0, marginBottom: 15 }}
            title={() => (<Row>
                <Col span={20}><div><Icon type="user" className={style.title_instructor} />&nbsp;{title}</div></Col>
                <Col span={4}><AxButton className='ax-no-class' style={{ float: 'right' }} type='link' onClick={onClick} >更多</AxButton></Col>
            </Row>)}
            columns={columns}
            dataSource={data}
        />
    )
}

const InstructorCenter: React.FC<any> = props => {
    let userName: any = 'Bill';//JSON.parse(userInfo).userName

    /**头部数据 */
    const data: AxPanelSumProps = {
        name: userName,
        greet: '欢迎您',
        desc: '欢迎来到辅导员可视中心,在这里你可以查询到你想要的有效信息！',
        statistics: [{
            name: '管理班级数',
            total: 8,
        }, {
            name: '管理人数',
            total: 425,
        }],
    };

    const MSGdata1 = {
        title: '流程/任务页',
        columns: [{
            dataIndex: 'name'
        }],
        data: [
            { id: 0, name: "xxx学生宿舍变更申请已经同意宿舍已经调整到X-XXX" },
            { id: 1, name: "xxx学生宿舍变更申请已经同意宿舍已经调整到X-XXX1" },
            { id: 2, name: "xxx学生宿舍变更申请已经同意宿舍已经调整到X-XXX2" },
            { id: 3, name: 'xxx学生欠费状态已更新' },
            { id: 4, name: 'xxx学生助学金申请已经提交' },
            { id: 5, name: 'xxx学生的信息已经变更' },
            { id: 6, name: 'xxx学生的信息已经变更2' }
        ]
    };

    const MSGdata2 = {
        title: '流程/任务页',
        columns: [{
            dataIndex: 'name',
        }, {
            dataIndex: 'status',
            width: axconst.width.fouronly,
        }, {
            dataIndex: 'time',
            width: axconst.width.time,
        }, {
            width: axconst.width.twox,
            render: (val: any, record: any) => (
                <AxColumnAction
                    buttons={[
                        {
                            text: '查看',
                            // permissions: 1,
                        },
                    ]}
                />
            )
        }],
        data: [
            { id: 0, name: "xxx学生宿舍变更申请已经同意宿舍已经调整到X-XXX", status: '待审核', time: '2020-01-02 17:23:22' },
            { id: 1, name: "xxx学生宿舍变更申请已经同意宿舍已经调整到X-XXX1", status: '待审核', time: '2020-01-02 17:23:22' },
            { id: 2, name: "xxx学生宿舍变更申请已经同意宿舍已经调整到X-XXX2", status: '待审核', time: '2020-01-02 17:23:22' },
            { id: 3, name: 'xxx学生欠费状态已更新', status: '待审核', time: '2020-01-02 17:23:22' },
            { id: 4, name: 'xxx学生助学金申请已经提交', status: '待审核', time: '2020-01-02 17:23:22' },
            { id: 5, name: 'xxx学生的信息已经变更', status: '通过', time: '2020-01-02 17:23:22' },
            { id: 6, name: 'xxx学生的信息已经变更2', status: '驳回', time: '2020-01-02 17:23:22' }
        ]
    };

    return (
        <div style={{ minHeight: 768 }}>
            <Row gutter={15}>
                <Col span={16}>
                    <Row gutter={15}>
                        <Col span={24}>
                            <AxPanelSum {...data} />
                        </Col>
                    </Row>
                    <Row gutter={15} style={{ marginLeft: 10 }}>
                        <Col span={12}>
                            <AxPanelSum2 {...data} />
                        </Col>
                        <Col span={12}>
                            <AxPanelSum3 {...data} />
                        </Col>
                    </Row>
                </Col>
                <Col span={8}>
                    <AxPanelMsg2 {...MSGdata1} title='消息中心' onClick={() => router.push('/seller/msg')} />
                </Col>
            </Row>
            <Row gutter={15}>
                <Col span={16}>
                    <Row gutter={15} style={{ marginLeft: 10 }}>
                        <Col span={24}>
                            <AxPanelSum4 {...data} />
                        </Col>
                    </Row>
                </Col>
                <Col span={8}>
                    <AxPanelMsg2 {...MSGdata2} title='我的申请' onClick={() => router.push('/seller/apply')} />
                </Col>
            </Row>
        </div>
    );
};

export default InstructorCenter;
